<template>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        size="80%"
        :before-close="handleClose">
        <div class="month-list-setting">
            <div class="title-box"> 
                <span class="title">{{pageType === 'job' ? '职位置顶' : '企业置顶'}}设置</span>
            </div>
            <!-- <el-row :gutter="10" class="mb8">
                <span></span>
            </el-row> -->
            <el-tabs v-model="activeName" type="card" @tab-click="handleClicktab">
                <el-tab-pane :label="hotLabel" name="1"></el-tab-pane>
                <el-tab-pane :label="newLabel" name="2"></el-tab-pane>
            </el-tabs>
            <el-table style="width: 100%" :data="tableData" ref="singleTable" 
                @selection-change="handleSelectionChange"
                highlight-current-row row-key="id" class="load_table">
                
                <el-table-column label="拖动排序" align="center"  width="100">
                    <template slot-scope="scope">
                        <div class="img-box">
                            <img src="@/assets/icons/drag.png" class="icon" alt="" style="width: 30px;height: 30px;">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="位置">
                    <template slot-scope="scope">
                        <div class="title-box">
                            <span>{{scope.$index + 1}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="jobName" label="职位名称" align="center" v-if="pageType === 'job'"></el-table-column>
                <el-table-column prop="companyName" label="企业名称" align="center" v-else></el-table-column>
                <el-table-column label="操作" align="center"  width="160">
                    <template slot-scope="scope">
                    <div class="btn-box">
                        <el-button type="primary" plain @click="handleDelete(scope.row)">取消置顶</el-button>
                    </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <span class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import { 
    getHotJobList, 
    updateRankingJobSort, 
    updateJobNew,
    updateJobHot,
    getHotCompanyList,
    updateCompanyNew,
    updateCompanyHot,
    updateRankingCompanySort
} from '@/api/school-admin-api/hireManage/index.js'
import Sortable from "sortablejs";
import FormGroup from '@/views/components/FormGroup';
import FileUpload from '@/components/FileUpload';
// import { TYPE } from '../initData';
const TYPE = 1
export default {
    name: 'SetRankingList',
    components: {
        FormGroup,
        FileUpload
    },
    data() {
        return {
            dialogVisible: false,
            sortable: null,
            tableData: [],
            title: '',
            tableSelectList: [],
            operate: '',
            pageType: '', // job\com
            activeName: '1',
            activeObj: {
                "1": null,
                "2": null
            }
        }
    },
    computed: {
        hotLabel() {
            return this.pageType === 'job' ? '热门职位' : '热门企业'
        },
        newLabel() {
            return this.pageType === 'job' ? '最新职位' : '最新企业'
        }
    },
    methods: {
        open({pageType}) {
            this.pageType = pageType;
            this.dialogVisible = true;
            
            this.$nextTick(() => {
                this.dragSort();
            });
            
            this.handleGetList();
        },
        handleGetList(type = '1') {
            if (this.pageType === 'job') {
                this.getHotJobList(type);
            } else {
                this.getHotCompanyList(type);
            }
        },
        handleClicktab() {
            if (this.activeObj[this.activeName]) {
                this.tableData = this.activeObj[this.activeName];
                return;
            }
            this.handleGetList(this.activeName);
        },
        async getHotJobList(type = '1') {
            // type - 1:热门职位,2:最新职位
            const { code, data } = await getHotJobList({
                type, 
            });
            if (code === 0) {
                this.tableData = data;
                this.activeObj[this.activeName] = data;
            } else {
                this.tableData = [];
            }
        },
        async getHotCompanyList(type = '1') {
            const { code, data } = await getHotCompanyList({
                type,
            });
            if (code === 0) {
                this.tableData = data;
                this.activeObj[this.activeName] = data;
            } else {
                this.tableData = [];
            }
        },
        handleClose() {
            this.resetData();
        },
        async handleConfirm() {
            if (!this.tableData || this.tableData.length === 0) {
                this.resetData();
                return;
            }
            if ((!this.activeObj["1"] || this.activeObj["1"].length === 0) && (!this.activeObj["2"] || this.activeObj["2"].length === 0)) {
                this.dialogVisible = false;
                return;
            }
            let params = {
                type: '',
                ids: []
            }
            if (this.activeObj["1"] && this.activeObj["1"].length > 0) {
                params = {
                    type: "1",
                    ids: this.activeObj["1"].map(v => v.id)
                }
                // 1:热门职位,2:最新职位
                if (this.pageType === 'job') {
                    const code = await this.handleUpdateJob(params);
                    if (code === 0) {
                        this.resetData();
                        this.$emit('success');
                    }
                } else {
                    const code = await this.handleUpdateCom(params);
                    if (code === 0) {
                        this.resetData();
                        this.$emit('success');
                    }
                }
            }

            if (this.activeObj["2"] && this.activeObj["2"].length > 0) {
                params = {
                    type: "2",
                    ids: this.activeObj["2"].map(v => v.id)
                }
                // 1:热门职位,2:最新职位
                if (this.pageType === 'job') {
                    const code = await this.handleUpdateJob(params);
                    if (code === 0) {
                        this.$message.success('设置成功');
                        this.resetData();
                        this.$emit('success');
                    } else {
                        this.$message.error('设置失败，请重试');
                    }
                } else {
                    const code = await this.handleUpdateCom(params);
                    if (code === 0) {
                        this.$message.success('设置成功');
                        this.resetData();
                        this.$emit('success');
                    } else {
                        this.$message.error('设置失败，请重试');
                    }
                }
            }
            
        },
        // updateRankingCompanySort
        async handleUpdateJob(params) {
            const { code } = await updateRankingJobSort(params);
            return code;
        },
        async handleUpdateCom(params) {
            const { code } = await updateRankingCompanySort(params);
            return code;
            
        },
        // 保存关闭后 重置数据
        resetData() {
            this.dialogVisible = false;
            this.tableSelectList = [];
            this.tableData = [];
            this.activeName = '1';
        },
        // 取消置顶
        handleDelete(row) {
            this.$confirm(`确定取消置顶?`, '提示').then(() => {
                this.handleCancelTop(row);
            })
        },
        async handleCancelTop(row) {
            if (this.pageType === 'job') {
                if (this.activeName === '1') {
                    this.updateJobHot(row);
                } else {
                    this.updateJobNew(row);
                }
            } else {
                if (this.activeName === '1') {
                    this.updateCompanyHot(row);
                } else {
                    this.updateCompanyNew(row);
                }
            }
            
        },
        async updateJobNew(row) {
            const { code, msg } = await updateJobNew({
                id: row.id,
                isNew: '0'
            });
            if (code === 0) {
                this.$message.success('操作成功');
                this.handleGetList(this.activeName);
            } else {
                this.$message.error(msg);
            }
        },
        async updateJobHot(row) {
            const { code, msg } = await updateJobHot({
                id: row.id,
                isHot: '0'
            });
            if (code === 0) {
                this.$message.success('操作成功');
                this.handleGetList(this.activeName);
            } else {
                this.$message.error(msg);
            }
        },

        async updateCompanyNew(row) {
            const { code, msg } = await updateCompanyNew({
                id: row.id,
                isNew: '0'
            });
            if (code === 0) {
                this.$message.success('操作成功');
                this.handleGetList(this.activeName);
            } else {
                this.$message.error(msg);
            }
        },
        async updateCompanyHot(row) {
            console.log(row, '---row')
            const { code, msg } = await updateCompanyHot({
                id: row.id,
                isHot: '0'
            });
            if (code === 0) {
                this.$message.success('操作成功');
                this.handleGetList(this.activeName);
            } else {
                this.$message.error(msg);
            }
        },

        handleSelectionChange(val) {
            this.tableSelectList = val;
        },
        //表格拖动排序
        dragSort() {
            if (!this.$refs.singleTable) return;
            const el = this.$refs.singleTable.$el.querySelectorAll(
                ".el-table__body-wrapper > table > tbody"
            )[0];
            this.sortable = Sortable.create(el, {
                ghostClass: "sortable-ghost",
                setData: function (dataTransfer) {
                    dataTransfer.setData("Text", "");
                },
                onEnd: (e) => {
                    const targetRow = this.tableData.splice(e.oldIndex, 1)[0];
                    this.tableData.splice(e.newIndex, 0, targetRow);
                    //这块根据自己需求处理
                    let temp = [];
                    this.tableData.map((m, i) => {
                        temp.push({
                            id: m.id,
                            seq: i,
                        });
                    });

                    this.activeObj[this.activeName] = this.tableData;
                },
            });
        },
    }
}
</script>

<style lang='scss' scoped>
    .month-list-setting {
        margin-bottom: 20px;
        max-height: 630px;
        overflow: auto;
        .title-box {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            .title {
                font-size: 26px;
                font-weight: bold;
                margin-right: 15px;
            }
        }
        
    }

    
</style>